import { List } from 'antd';
import { Key, ReactNode } from 'react';

interface SingleSelectListProps<T, K = Key> {
  items: T[];
  selectedKey?: K;
  onSelect: (key: K) => void;
  getKey: (item: T) => K;
  renderItem: (item: T) => ReactNode;
}

export function SingleSelectList<T, K = Key>({
  items,
  selectedKey,
  onSelect,
  getKey,
  renderItem,
}: SingleSelectListProps<T, K>) {
  return (
    <div className='w-[180px] h-[210px] overflow-auto border border-gray-300'>
      <List
        className='min-h-[210px] select-none'
        dataSource={items}
        size='small'
        renderItem={(item) => {
          const key = getKey(item);
          const isSelected = key === selectedKey;
          return (
            <List.Item
              className={
                isSelected
                  ? 'bg-[#f2f2ff] hover:!bg-[#e8e8f8]'
                  : 'hover:bg-[#fbfbfb]'
              }
              onClick={() => onSelect(key)}
            >
              {renderItem(item)}
            </List.Item>
          );
        }}
      />
    </div>
  );
}
